<template>
  <div class="county-chronicle"> 
    <Header :activeIndex="2" :swiperPics="villageInfoData.picList"></Header>

    <!-- 村志简介 -->
    <ContentInfo @toggleDropdown="toggleDropdown" :data="villageInfoData">
      <template v-slot:content-bottom>
          <a href="" class="village-btn">
            查看村志
          </a>
      </template>
    </ContentInfo>

    <!-- 乡贤名士 -->
    <ScholarsModule :data='scholarsData'></ScholarsModule>

    <!-- 文化古迹 -->
    <CulturalHeritage :data="culturalData"></CulturalHeritage>

    <!-- 寻根问谱 -->
    <AncestralRecords :data="genealogyData"></AncestralRecords>

    <!-- 宁海文化 -->
    <NinghaiCulture :data="literatureArr"></NinghaiCulture>

    <PageFooter></PageFooter>
  </div>


  <el-dialog v-model="dialogVisible" title="" class="no-header-dialog"   width="1280" :before-close="handleClose">
    <div class="dropdown" >
      <div class="dropdown-title">乡镇街道</div>
      <ul class="dropdown-ul">
        <li class="dropdown-li" :class="activeTownId===item.id?'active':''" @click="onHandlerTown(item)" v-for="item in townArr" :key="item.id">
          <span>{{ item.name }}</span>
          <i class="arrow"></i>
        </li>

      </ul>
    </div>

    <div class="dropdown dropdown2" >
      <div class="dropdown-title">村社区</div>
      <ul class="dropdown-ul">
        <li class="dropdown-li" v-for="item in villageArr" :key="item.name" @click="handleVillageClick(item)">
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>
  </el-dialog>
</template>
<script setup>
import Header from "@/components/Header.vue";
import ScholarsModule from "@/components/ScholarsModule.vue";
import CulturalHeritage from "@/components/CulturalHeritage.vue";
import AncestralRecords from "@/components/AncestralRecords.vue";
import NinghaiCulture from "@/components/NinghaiCulture.vue";
import ContentInfo from "@/components/ContentInfo.vue";
import ScrollingText from "@/components/ScrollingText.vue";
import PageFooter from '@/components/PageFooter.vue'

import { homeModelList, townList, chroniclesTree, townInfo, townChildList } from '@/api/common'
import { getGenealogyList } from '@/api/common_also'
import { useRoute, useRouter } from 'vue-router'
import { onMounted, onBeforeUnmount, ref, nextTick, watch } from "vue";
import { literature } from "@/hooks/literature";

const { literatureArr, getLiteratureListPage } = literature()

const route = useRoute()
const router = useRouter()

// 移除原来的 const id = route.query.id
const id = ref(route.query.id)

const dialogVisible = ref(false)

const handleClose = () => {
  dialogVisible.value = false
}

// 各模块数据
const scholarsData = ref([])        // 乡贤名士
const culturalData = ref([])        // 文化古迹
const genealogyData = ref([])       // 祖先

const villageInfoData = ref({})

// 乡镇列表
const townArr = ref([])
// 村社区列表
const villageArr = ref([])
const activeTownId = ref(null)

// 监听路由变化
watch(
  () => route.query.id,
  (newId) => {
    id.value = newId
    // 重新加载所有数据
    loadData()
  }
)

const toggleDropdown = () => { 
  activeTownId.value = townArr.value[0].id
  dialogVisible.value = true
  getVillageList()
}
//查询乡镇、街道列表
const getTownList = () => { 
  townChildList({
    orgId: 1
  }).then(res => { 
    let { code, data, message } = res
    if(code === 0){
      townArr.value = data
      activeTownId.value = data[0].id
      getVillageList()
    }else{
      ElMessage.warning(message);
    }
  })
}

const handleVillageClick = (item) => { 
  dialogVisible.value = false
  router.push({ 
    path: '/village', 
    query: { id: item.id } 
  });
}
const onHandlerTown = (item)=> { 
  activeTownId.value = item.id
  getVillageList()
}
// 下属村list
const getVillageList = () => { 
  townChildList({
    orgId: activeTownId.value
  }).then(res => { 
    let { code, data, message } = res
    if(code === 0){
      villageArr.value = data
    }else{
      ElMessage.warning(message);
    }
  })
}

// 村信息
const getPageInfo = () => { 
  townInfo({id:id.value}).then(res=>{ 
    let { code, data, msg } = res
    if(code === 0){
      villageInfoData.value = data
    }else{
      ElMessage.warning(msg);
    }
  })
}
//寻根问谱
const getGenealogyListFunction = () => { 
  getGenealogyList({
    pageNum: 1,
    pageSize: 10,
    villageId: id.value
  }).then(res=>{
    let { data, msg } = res;
    // debugger
    if(res.code === '200') { 
      genealogyData.value = data.rows
    }else { 
      ElMessage.warning(msg);
    }
  })
};
// 使用 Promise.all 并发请求所有数据
const getAllHomeData = () => {
  const requests = [
    homeModelList({ type: 0, orgId: id.value }), // 乡贤名士
    homeModelList({ type: 1, orgId: id.value }), // 文化古迹
  ];

  Promise.all(requests)
    .then(responses => {
      responses.forEach((res, index) => {
        let { code, data, msg } = res;
        if (code === 0) {
          switch (index) {
            case 0:
              scholarsData.value = data;
              break;
            case 1:
              culturalData.value = data;
              break;
          }
        } else {
          ElMessage.warning(msg);
        }
      });
    })
    .catch(error => {
      console.error('请求出错:', error);
      ElMessage.error('数据加载失败');
    });
}

// 将数据加载逻辑封装成一个函数
const loadData = () => {
  getAllHomeData()
  getGenealogyListFunction()
  getPageInfo()

  getLiteratureListPage(id.value)
}

onMounted(() => {
  loadData()

  getTownList()
});

</script>
<style lang="scss">
.no-header-dialog{
  padding: 0;
  .el-dialog__header{
    padding-bottom: 0;
  }
 
}
</style>
<style lang="scss" scoped>
  .county-chronicle{
    min-width: 1280px;
  }
  .village-btn{
    width: 156px;
    height: 48px;
    background: url('@/assets/images/community2.png');
    text-align: center;
    line-height: 48px;
    font-weight: 500;
    font-size: 20px;
    color: #FFFFFF;
    &:hover{ 
      font-size: 21px;
    }
  }

  

  .dropdown{
    padding: 35px 50px;
    background: #F5F5F5;
    width: 100%;
    z-index: 99;
    display: flex;
    &.dropdown2{
      background-color: #FFFFFF;
    }
    .dropdown-title{
      font-weight: 500;
      font-size: 22px;
      color: #111111;
      margin: 14px 0;
      width: 180px;
    }
    .dropdown-ul{
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      flex: 1;

      .dropdown-li{
        display: flex;
        align-items: center;
        width: 120px;
        margin: 14px 20px;
        cursor: pointer;
        font-weight: 500;
        font-size: 16px;
        &.active{
          color: #B52628;
          .arrow{
            background-image: url("@/assets/images/arrow2.png");
          }
        }
        &:hover{ 
          color: #B52628;
          .arrow{
            background-image: url("@/assets/images/arrow2.png");
          }
        }
        .arrow{
          display: inline-block;
          margin-left: 12px;
          width: 14px;
          height: 14px;
          background-image: url("@/assets/images/arrow1.png");
        }
      }
    }
  }
</style>
